<template>
<div>
  <div class="titlename">
    <div class="fonttitle">{{detailTitle}}类型：
        <Select style="width:150px" @on-select="selectdetailtype" clearable ref="applySelect">
            <Option value="1" key="1">个人</Option>
            <Option value="2" key="2">公司</Option>
        </Select>
    </div>
  </div>
  
  <div class="applyPeople" v-if="applydetailtype==1">
        <!-- 申请人 个人 -->
        <div class="simple">
          <div class="PeoInfo">
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="姓名">
                      <Input v-model="applyivs&&applyivs.name"/>
                  </FormItem>
                  <FormItem label="联系方式">
                      <Input v-model="applyivs&&applyivs.contact"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="身份证号">
                      <Input v-model="applyivs&&applyivs.idCard" style="width:310px"/>
                  </FormItem>
                  <FormItem label="地址">
                      <!-- <Input v-model="applyivs&&applyivs.address"/> -->
                      <Select filterable v-model="applyivs&&applyivs.province"  @on-select="openchange"
                              style="width:90px" @on-change="filterCity(applyivs,applyivs.province)">
                          <Option v-for="item in provinceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="applyivs&&applyivs.city" 
                              style="width:100px;margin-left:10px;" @on-select="openchange"
                              @on-change="filterArea(applyivs,applyivs.city)">
                          <Option v-for="item in applyivs.cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="applyivs&&applyivs.areaname" style="width:100px;margin-left:10px;">
                          <Option v-for="item in applyivs.areaList" :value="item.label" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Input v-model="applyivs&&applyivs.street" style="width:300px;margin-left:10px;"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="邮箱">
                      <Input v-model="applyivs&&applyivs.email"/>
                  </FormItem>
                  <FormItem label="有无代理人">
                      <Select v-model="isproxy" @on-change="isapplylaw">
                          <Option value="1" key="1" label="有">有</Option>
                          <Option value="2" key="2" label="无">无</Option>
                      </Select>
                  </FormItem>
                </Form>
              </div>
          </div>
          <!-- 律师事务所全称 -->
          <div class="lawinfo" v-show="isapplysimple">
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="律师事务所全称">
                      <Input v-model="applyivs&&applyivs.proxy.proxyName"/>
                  </FormItem>
                  <FormItem label="邮箱">
                      <Input v-model="applyivs&&applyivs.proxy.proxyEmail"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="电话">
                      <Input v-model="applyivs&&applyivs.proxy.proxyNumber" style="width:310px"/>
                  </FormItem>
                  <FormItem label="住所地">
                      <!-- <Input v-model="applyivs&&applyivs.proxy.proxyAddress"/> -->
                        <Select filterable v-model="applyivs&&applyivs.proxy.province" @on-select="openchange"
                                style="width:90px" @on-change="filterCity(applyivs,applyivs.proxy.province,'proxy')">
                            <Option v-for="item in provinceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        <Select filterable v-model="applyivs&&applyivs.proxy.city" 
                                style="width:100px;margin-left:10px;" @on-select="openchange"
                                @on-change="filterArea(applyivs,applyivs.proxy.city,'proxy')">
                            <Option v-for="item in applyivs.proxy.cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        <Select filterable v-model="applyivs&&applyivs.proxy.areaname"
                                style="width:100px;margin-left:10px;">
                            <Option v-for="item in applyivs.proxy.areaList" :value="item.label" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        <Input v-model="applyivs&&applyivs.proxy.street" style="width:300px;margin-left:10px;"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="承办律师姓名">
                      <Input v-model="applyivs&&applyivs.proxy.lawyerName"/>
                  </FormItem>
                  
                </Form>
              </div>
          </div>
        </div>
  </div>

  <div class="applyPeople simple company" v-else-if="applydetailtype==2">
          <!-- 申请人 公司 -->
          <div class="PeoInfo">
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="公司全称">
                      <Input v-model="applycompanyivs&&applycompanyivs.companyName"/>
                  </FormItem>
                  <FormItem label="联系方式">
                      <Input v-model="applycompanyivs&&applycompanyivs.contactNumber"/>
                  </FormItem>
                  <FormItem label="邮箱">
                      <Input v-model="applycompanyivs&&applycompanyivs.companyEmail"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="法人代表人">
                      <Input v-model="applycompanyivs&&applycompanyivs.legalName" style="width:310px"/>
                  </FormItem>
                  <FormItem label="机构代码">
                      <Input v-model="applycompanyivs&&applycompanyivs.orgCode" style="width:310px"/>
                  </FormItem>
                  <FormItem label="住所地">
                      <!-- <Input v-model="applycompanyivs&&applycompanyivs.companyAddress"/> -->
                      <Select filterable v-model="applycompanyivs&&applycompanyivs.province" @on-select="openchange"
                              style="width:90px" @on-change="filterCity(applycompanyivs,applycompanyivs.province)">
                          <Option v-for="item in provinceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="applycompanyivs&&applycompanyivs.city" 
                              style="width:100px;margin-left:10px;" @on-select="openchange"
                              @on-change="filterArea(applycompanyivs,applycompanyivs.city)">
                          <Option v-for="item in applycompanyivs.cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="applycompanyivs&&applycompanyivs.areaname" style="width:100px;margin-left:10px;">
                          <Option v-for="item in applycompanyivs.areaList" :value="item.label" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Input v-model="applycompanyivs&&applycompanyivs.street" style="width:300px;margin-left:10px;"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="职务">
                      <Input v-model="applycompanyivs&&applycompanyivs.legalPosition"/>
                  </FormItem>
                  <FormItem label="联系人">
                      <Input v-model="applycompanyivs&&applycompanyivs.contactNumber" />
                  </FormItem>
                  <FormItem label="有无代理人">
                      <Select v-model="iscompanyproxy" @on-change="isapplycompanylaw">
                          <Option value="1" key="1">有</Option>
                          <Option value="2" key="2">无</Option>
                      </Select>
                  </FormItem>
                </Form>
              </div>
          </div>
          <!-- 律师事务所全称 -->
          <div class="lawinfo" v-show="isapplycompany">
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="律师事务所全称">
                      <Input v-model="applycompanyivs&&applycompanyivs.proxy.proxyName"/>
                  </FormItem>
                  <FormItem label="邮箱">
                      <Input v-model="applycompanyivs&&applycompanyivs.proxy.proxyEmail"/>
                  </FormItem>
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="电话">
                      <Input v-model="applycompanyivs&&applycompanyivs.proxy.proxyNumber" style="width:310px"/>
                  </FormItem>
                  <FormItem label="住所地">
                      <!-- <Input v-model="applycompanyivs&&applycompanyivs.proxy.proxyAddress"/> -->
                      <Select filterable v-model="applycompanyivs&&applycompanyivs.proxy.province" @on-select="openchange"
                              style="width:90px" @on-change="filterCity(applycompanyivs,applycompanyivs.proxy.province,'proxy')">
                          <Option v-for="item in provinceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="applycompanyivs&&applycompanyivs.proxy.city" 
                              style="width:100px;margin-left:10px;" @on-select="openchange"
                              @on-change="filterArea(applycompanyivs,applycompanyivs.proxy.city,'proxy')">
                          <Option v-for="item in applycompanyivs.proxy.cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Select filterable v-model="applycompanyivs&&applycompanyivs.proxy.areaname" style="width:100px;margin-left:10px;">
                          <Option v-for="item in applycompanyivs.proxy.areaList" :value="item.label" :key="item.value">{{ item.label }}</Option>
                      </Select>
                      <Input v-model="applycompanyivs&&applycompanyivs.proxy.street" style="width:300px;margin-left:10px;"/>
                  </FormItem>
                  
                </Form>
              </div>
              <div class="detailJusfy">
                <Form label-position="left" :label-width="120" class="viewform">
                  <FormItem label="承办律师姓名">
                      <Input v-model="applycompanyivs&&applycompanyivs.proxy.lawyerName"/>
                  </FormItem>
                </Form>
              </div>
          </div>
        </div>
  
  
  </div>
</template>

<script>
export default {
  name: 'DetailIndex',
  data(){
     return {
       basicInfo:{},
       proxyPeo:'2',
       lawinfo:'',
       isproxy:'1',
       iscompanyproxy:'1',
       applyivs:{
          applydetailtype:'1',
          name:'',contact:'',idCard:'',email:'',address:'',
          cityList:[],areaList:[],
          privincename:'',cityname:'',areaname:'',street:'',area:'',
          // province:'',city:'',area:'',street:'',
          proxy:{proxyName:'',proxyAddress:'',proxyNumber:'',
                privincename:'',cityname:'',areaname:'',street:'',
                proxyEmail:'',lawyerName:'',cityList:[],areaList:[]}},
       applycompanyivs:{
          applydetailtype:'2',
          companyName:'',companyAddress:'',legalName:'',legalPosition:'',orgCode:'',
          privincename:'',cityname:'',areaname:'',street:'',
          contactName:'',companyEmail:'',contactNumber:'',cityList:[],areaList:[],
          proxy:{proxyName:'',proxyAddress:'',proxyNumber:'',
                privincename:'',cityname:'',areaname:'',street:'',
                proxyEmail:'',cityList:[],areaList:[],lawyerName:''}},
       applydetailtype:'',
       isapplysimple:true,
       isapplycompany:true,
       addrname:''
      //  provinceList:[{value: '1',label: '江苏省'},{value: '2',label: '安徽省'},{value: '3',label: '浙江省'}],
      //  cityList:[{value: '1',label: '南京市'},{value: '2',label: '合肥市'},{value: '3',label: '杭州市'}],
      //  areaList:[{value: '1',label: '江宁区'},{value: '2',label: '包河区'},{value: '3',label: '西湖区'}]
     }
  },
  props: ['caseNo','detailTitle','emptyINfo','provinceList'],
  computed:{
    emptystatus:function(){
      return this.emptyINfo
    }
  },
  watch:{
    emptystatus:function(){
      this.applydetailtype='3';
      this.$refs['applySelect'].clearSingleSelect();
      this.applyivs={
          applydetailtype:'1',
          name:'',contact:'',idCard:'',email:'',address:'',
          cityList:[],areaList:[],
          privincename:'',cityname:'',areaname:'',street:'',area:'',
          proxy:{proxyName:'',proxyAddress:'',proxyNumber:'',
                privincename:'',cityname:'',areaname:'',street:'',
                proxyEmail:'',lawyerName:'',cityList:[],areaList:[]}}
      this.applycompanyivs={
          applydetailtype:'2',
          companyName:'',companyAddress:'',legalName:'',legalPosition:'',orgCode:'',
          privincename:'',cityname:'',areaname:'',street:'',
          contactName:'',companyEmail:'',contactNumber:'',cityList:[],areaList:[],
          proxy:{proxyName:'',proxyAddress:'',proxyNumber:'',
                privincename:'',cityname:'',areaname:'',street:'',
                proxyEmail:'',cityList:[],areaList:[],lawyerName:''}}
    }
  },
  methods:{
    openchange(param){
       this.addrname=param.label;
    },
    filterCity(param,param2,param3){
      if(param2){  
        this.$http.get('/api2'+this.urls.getCity+'/'+param2).then((result)=>{
          if(result.data.length>0){
           
              if(param3=='proxy'){
                  param.proxy.cityList=result.data;
                  param.proxy.areaList=[];
                  param.proxy.cityname='';
                  param.proxy.areaname='';
                  param.proxy.area='';
                  param.proxy.privincename=this.addrname;
              }else{
                  param.cityList=result.data;
                  param.areaList=[];
                  param.cityname='';
                  param.areaname='';
                  param.area='';
                  param.privincename=this.addrname;
              }
          }else{
            this.$Message.warning('网络错误');
          }
        })
      } 
       
    },
    filterArea(param,param2,param3){
      if(param2){
        this.$http.get('/api2'+this.urls.getArea+'/'+param2).then((result)=>{
          if(result.data.length>0){
           
              if(param3=='proxy'){
                  param.proxy.areaList=result.data;
                  param.proxy.cityname=this.addrname;
              }else{
                  param.areaList=result.data;
                  param.cityname=this.addrname;
              }
          }else{
            this.$Message.warning('网络错误');
          }
        })
      }
        
    },
    selectdetailtype(param){
      if(this.provinceList.length>0&&this.provinceList[0]){
          this.applydetailtype=param.value
      }else{
        this.$Message.warning('网络错误');
      }
      
    },
    isapplylaw(param){
      if(param=='1'){
        this.isapplysimple=true
      }else{
        this.isapplysimple=false
      }
    },
    isapplycompanylaw(param){
      if(param=='1'){
        this.isapplycompany=true
      }else{
        this.isapplycompany=false
      }
    },
    dataApplySave(){
      if(this.applydetailtype=='1'){
         return this.applyivs;
      }else if(this.applydetailtype=='2'){
         return this.applycompanyivs;
      }
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .fonttitle{
    font-size: 16px;
  }
  
  .titlename{
    padding: 22px 24px 0 24px;
  }

  .simple{
    padding: 0 24px 0 24px;
    border-top: 2px dashed;
    margin-top: 16px;
  }
  
  .PeoInfo{
    display: grid;
    grid-template-columns: 22% 46% 33%;
    clear: both;
    /* border-bottom: 2px solid #e6e6e6; */
  }
  .lawinfo{
    display: grid;
    grid-template-columns: 22% 46% 33%;
    border-top: 1px dashed;
  }
  .company{
    padding: 0 24px 0 24px;
    border-top: 2px dashed;
    margin-top: 16px;
  }
  .btn{
    background: #2e37cb;
    color: #fff;
    line-height: 30px;
    width: 120px;
    height: 30px;
    display: inline-block;
    margin-left: 50px;
    text-align: center;
    cursor: pointer;
  }
  .btn-apply{
    background: #1aa864;
  }
  .filterCon{
    margin: 20px;
  }
  .applyTime{
    margin: 0 40px;
  }
  .del{
    width: 40px;
    float: right;
    background: #f5d5d5;
    color:#cb2e2e;
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
  }
</style>
